<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>
        logView
    </title>
    <meta name="description" content="view">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
    <link rel="shortcut icon" th:href="@{/img/fav.ico}"/>
    <!-- Icons -->
    <link th:href="@{/css/nucleo-icons.css}" rel="stylesheet">

    <!-- Theme CSS -->
    <link type="text/css" th:href="@{/css/blk-design-system.css}" rel="stylesheet">
    <link type="text/css" th:href="@{/demo/demo.css}" rel="stylesheet">
    <link type="text/css" th:href="@{/css/jquery-confirm.css}" rel="stylesheet">
    <!-- Optional: page related CSS-->
</head>
<body class="index-page">
<nav class="navbar navbar-expand-lg fixed-top bg-info">
    <div class="container">
        <div class="navbar-translate">
            <a class="navbar-brand" th:href="@{/}" rel="tooltip" title="" data-placement="bottom" target="_blank"
               data-original-title="新开一个窗口查看文件目录信息">
                <span>Log•</span> View System
            </a>
            <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
                    aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-bar bar1"></span>
                <span class="navbar-toggler-bar bar2"></span>
                <span class="navbar-toggler-bar bar3"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse justify-content-end" id="navigation">
            <div class="navbar-collapse-header">
                <div class="row">
                    <div class="col-6 collapse-brand">
                        <a>
                            LogView•
                        </a>
                    </div>
                    <div class="col-6 collapse-close text-right">
                        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navigation"
                                aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                            <i class="tim-icons icon-simple-remove"></i>
                        </button>
                    </div>
                </div>
            </div>
            <ul class="navbar-nav">

            </ul>
        </div>
    </div>
</nav>
<div class="wrapper">
    <div class="main " style="margin-top: 80px">
        <div>

            <div class="form-row">
                <div class="form-group  col-md-4">
                    <div class="input-group">
                        <input id="keyWord" type="text" class="form-control form-control-success searchInputText"
                               placeholder="输入关键词, 按<N>到下一个位置 按<B>到上一个位置">
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="tim-icons icon-lock-circle"></i></span>
                        </div>
                    </div>
                </div>
                <div class="form-group  col-md-4">
                    <button class="btn btn-warning btn-sm search">检索</button>
                    <button class="btn btn-primary btn-sm download">下载</button>
                    <button class="btn btn-info btn-sm goback">上级目录</button>
                </div>
            </div>


        </div>
        <blockquote>
            <p class="blockquote blockquote-white " style="font-size: 11px;">
                正在加载中...请稍候...
            </p>
        </blockquote>

    </div>
</div>

<script th:src="@{/js/core/jquery.min.js}"></script>
<script th:src="@{/js/core/popper.min.js}"></script>
<script th:src="@{/js/core/bootstrap.min.js}"></script>
<!--    <script th:src="@{/js/plugins/perfect-scrollbar.jquery.min.js}"></script>-->
<!--    <script th:src="@{/js/plugins/bootstrap-switch.js}"></script>-->
<!--    <script th:src="@{/js/plugins/nouislider.min.js}"></script>-->
<!--<script th:src="@{/js/plugins/jquery.quicksearch.js}"></script>-->
<script th:src="@{/demo/demo.js}"></script>

<!-- Theme JS -->
<script th:src="@{/js/blk-design-system.js}"></script>
<script th:src="@{/js/logView.js}"></script>
<script th:src="@{/js/plugins/jquery-confirm.js}"></script>
<script type="text/javascript">
    var path = getUrlParam("path");
    var contentOriginal = '';
    // var qs = $('.searchInputText').quicksearch('.blockquote');
    $(function () {
        //获取文件内容
        getFileLog(path);
        //按钮事件监听
        $(".download").click(function () {
            window.location.href = getRootPath() + "/file/download?path=" + path;
        });

        $(".search").click(function () {
            searchLogContent();
        });

        $(".goback").click(function () {
            var tempPath = path;
            if (tempPath.charAt(tempPath.length - 1) == '/') {
                tempPath = "";
            } else {
                tempPath = tempPath.substring(0, tempPath.lastIndexOf("/"));
            }
            window.location.href = getRootPath() + "/index?path=" + tempPath;
        });

        $(document).bind('keydown', function (event) {

            console.log(event.keyCode);
            if (document.activeElement.id!=="keyWord"&&event.keyCode === 78) {
                scrollToResult(0);
            }
            if (document.activeElement.id!=="keyWord"&&event.keyCode === 66) {
                scrollToResult(1);
            }
            if (event.keyCode === 13) {
                searchLogContent();
            }

        });
        // setScroll();
        // $(window).on("resize",setScroll);
    });

    function setScroll() {
        $(".blockquote").slimScroll({
            height: $(window).height() - 155,
            distance: "2px",
            opacity: 0.8,
            wheelStep: 1,
            allowPageScroll: true,
            color: "#FFF",
            alwaysVisible: 1
        });
    }

    var i = 0;

    function searchLogContent() {
        $(".searchInputText").blur();
        var searchText = $(".searchInputText").val();

        if(searchText == null || searchText == '') {
            alert('搜素内容不能为空！');
        }else {
            var tagContent = '<span class="result" style="background:yellow;color:red;">';
            var content = contentOriginal;

            //清楚上次搜索结果
            var regExp = new RegExp(searchText, 'g');
            content = content.replace(regExp, '<span class="result" style="background:yellow;color:red;">' + searchText + '</span>');

            $('.blockquote').html(content);
            scrollToResult(0);
        }
    }

    function scrollToResult(flag) {
        var a = $('.result');
        a[i].style.background = 'yellow';
        a[i].style.color = 'red';
        if (flag === 0) {
            i++;
        } else {
            i--;
        }
        if (i < 0) {
            i = 0;
        }
        if (i === a.length) {
            i = 0;
        }
        var ai = a[i];
        var X = ai.offsetTop - 300;
        var Y = ai.offsetLeft -20;
        ai.style.background = 'orange';
        ai.style.color = 'black';
        window.scroll(Y, X);

    }

    function getFileLog(path) {
        var method = "file/service/getFileContent/V1.0";
        var params = {"filePath": path};
        $.ajax(
            {
                url: getRootPath() + '/api/gateway.do',
                type: 'post',
                dateType: 'json',
                headers: {'Content-Type': 'application/json;charset=utf8'},
                data: JSON.stringify(getGlobalParams(params, method)),
                success: function (data) {
                    if (handlerResult(data)) {
                        contentOriginal = data.bizObj.replaceAll("\r\n", "<br/>");
                        $(".blockquote").html(contentOriginal);
                    } else {
                        $(".blockquote").html(data.retMsg);
                    }
                    // qs.cache();
                    // setScroll();
                },
                error: function (data) {
                    console.log("error");
                }
            }
        );
    }
</script>
</body>
</html>
